<script setup lang="tsx">
import { ref } from 'vue'

// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)

// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>全景图</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <!-- <div v-show="isExpanded" class="w-full">
        <el-row>
          <el-col :span="8">
            <el-statistic title="跟进次数" :value="562">
              <template #suffix>
                <span class="small-text">次</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="未跟进时长" :value="562">
              <template #suffix>
                <span class="small-text">天</span>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8">
            <el-statistic title="无收款INVOICE数量" :value="562">
              <template #suffix>
                <span class="small-text">个</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="无收款INVOICE金额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8">
            <el-statistic title="成交次数" :value="562">
              <template #suffix>
                <span class="small-text">次</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="成交总额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="回款总额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="应收未收" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="退款总额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="坏账总额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="开票总额" :value="562">
              <template #suffix>
                <span class="small-text">元</span>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8">
            <el-statistic title="复购周期" :value="562">
              <template #suffix>
                <span class="small-text">天</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="距离上次成交时长" :value="562">
              <template #suffix>
                <span class="small-text">天</span>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
      </div> -->
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

:deep(.small-text) {
  font-size: 12px; /* 调整单位大小 */
  color: #666; /* 颜色可以稍微变灰，弱化显示 */
}
</style>
